<template>
	<view class="container">
		<view class="layout">
			<view class="list-warp">
				<view class="wuliu">
					<view class="info">
						<image class="logo" src="@/static/images/messageIcon.png"></image>
						<view class="name">{{ state.name }}</view>
						<view class="name">{{ state.expressno }}</view>
					</view>
					<view class="right">
						<view class="label" @click="copy">复制</view>
						<view class="line"></view>
						<view class="label" @click="makePhoneCall">电话</view>
					</view>
				</view>
				<view class="steps">
					<!-- <view class="step">
						<view class="step-item">
							<view class="content">[收件地址]北京市北京市昌平区天通苑南街道中滩村6号合立方 王明振 132****0626</view>
						</view>
					</view> -->
					<view :class="['step', { active: index == 0 }]" v-for="(item, index) in state.list" :key="index">
						<view class="title">
							<image class="icon" src="@/static/images/qianshou.png"></image>
							<text class="name">{{ item.status }}</text>
						</view>
						<view class="step-item">
							<view class="content">{{ item.context }}</view>
							<view class="time">{{ item.time }}</view>
						</view>
					</view>
					<!-- <view class="step">
						<view class="title">
							<image class="icon" src="@/static/images/paisong.png"></image>
							<text class="name">派送中</text>
						</view>
						<view class="step-item">
							<view class="content">【华北众包站】您的快件正在派送中，请您准备签收(快递员:王成，联系电话:17601629629)</view>
							<view class="time">2025-01-07 20:57:32</view>
						</view>
					</view>
					<view class="step">
						<view class="title">
							<image class="icon" src="@/static/images/yunshu.png"></image>
							<text class="name">运输中</text>
						</view>
						<view class="step-item">
							<view class="content">您的快件已到达【北京合立方营业部】</view>
							<view class="time">2025-01-07 20:57:32</view>
						</view>
						<view class="step-item">
							<view class="content">您的快件在【北京合立方营业部】收货完成</view>
							<view class="time">2025-01-07 20:57:32</view>
						</view>
						<view class="step-item">
							<view class="content">您的快件已发车</view>
							<view class="time">2025-01-07 20:57:32</view>
						</view>
						<view class="step-item">
							<view class="content">您的快件由【北京通州分拣中心】准备发往【北京乔庄营业部】</view>
							<view class="time">2025-01-07 20:57:32</view>
						</view>
					</view>
					<view class="step">
						<view class="title">
							<image class="icon" src="@/static/images/cangku.png"></image>
							<text class="name">仓库处理中</text>
						</view>
						<view class="step-item">
							<view class="content">打包完成</view>
							<view class="time">2025-01-07 20:57:32</view>
						</view>
						<view class="step-item">
							<view class="content">扫描完成</view>
							<view class="time">2025-01-07 20:57:32</view>
						</view>
						<view class="step-item">
							<view class="content">拣货完成</view>
							<view class="time">2025-01-07 20:57:32</view>
						</view>
						<view class="step-item">
							<view class="content">您的订单以后打印完成</view>
							<view class="time">2025-01-07 20:57:32</view>
						</view>
					</view>
					<view class="step">
						<view class="title">
							<image class="icon" src="@/static/images/order.png"></image>
							<text class="name">已下单</text>
						</view>
						<view class="step-item">
							<view class="content">您的订单预计2024-12-27 00:01开始处理，请您耐心等待</view>
							<view class="time">2025-01-07 20:57:32</view>
						</view>
						<view class="step-item">
							<view class="content">您提交了订单，请等待系统确认</view>
							<view class="time">2025-01-07 20:57:32</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { get } from '@/request/index.js';

const state = reactive({
	expressno: '',
	name: '',
	list: []
});
onLoad((option) => {
	state.expressno = option.expressno;
});
const chakanwuliu = async () => {
	const res = await get('common/Kuaidi/list', { express_no: state.expressno });
	const { code, data } = res;
	if (code == 200) {
		state.list = data.list;
		state.name = data.name;
		state.expressno = data.express_no;
	}
};
//复制
const copy = () => {
	uni.setClipboardData({
		data: state.expressno
	});
};
//拨打电话
const makePhoneCall = (e) => {
	uni.makePhoneCall({
		phoneNumber: e
	});
};
</script>
